<template>
<div class="layout">
	
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'welisten-listener-index'}" >倾听者列表</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>
	</Row>

	<Form ref="vform" :model="vform" :label-width="80" inline >
		<Row type="flex" :gutter="16">
			<Col :span=16>
				<FormItem label="真实姓名">
					<Input readonly v-model="vform.realname"></Input>
				</FormItem>
				<FormItem label="昵称">
					<Input v-model="vform.nickname" placeholder="请填写昵称"></Input>
				</FormItem>
				<FormItem label="锁号">
					<Input readonly v-model="vform.idno"></Input>
				</FormItem>
				<FormItem label="手机号">
					<Input readonly v-model="vform.mobile"></Input>
				</FormItem>
				<FormItem label="性别">
					<Select v-model="vform.sex" placeholder="请选择" :label-in-value="true">
						<Option value=0 >女</Option>
						<Option value=1 >男</Option>
					</Select>
				</FormItem>
				<FormItem label="年龄">
					<InputNumber :max="9999" :min="18" :step="1" v-model="vform.age"></InputNumber>
				</FormItem>
				<FormItem label="类型">
					<Select v-model="vform.type" placeholder="请选择" :label-in-value="true" style="width:100px">
						<Option  v-for="(item,index) in typeList" :value="item.value" :key="index" >{{ item.label }}</Option>
					</Select>
				</FormItem>
				
				<FormItem label="星座">
					<Select v-model="vform.constellation" placeholder="请选择" :label-in-value="true" >
						<Option  v-for="(item,index) in constellationList" :value="item.value" :key="index" >{{ item.label }}</Option>
					</Select>
				</FormItem>
				<FormItem label="婚姻状态">
					<Select v-model="vform.married" placeholder="请选择" :label-in-value="true" style="width:100px">
						<Option  v-for="(item,index) in marriedList" :value="item.value" :key="index" >{{ item.label }}</Option>
					</Select>
				</FormItem>
				<FormItem label="头衔">
					<Select v-model="vform.title" placeholder="请选择" :label-in-value="true">
						<Option  v-for="(item,index) in titleList" :value="item.value" :key="index" >{{ item.label }}</Option>
					</Select>
				</FormItem>
				<FormItem label="学历">
					<Select v-model="vform.education" placeholder="请选择" :label-in-value="true">
						<Option  v-for="(item,index) in educationList" :value="item.value" :key="index" >{{ item.label }}</Option>
					</Select>
				</FormItem>
				<FormItem label="城市">
					<Cascader :data="chinadata" v-model="vcity" filterable @on-change="onCity"></Cascader>
				</FormItem>
				<FormItem label="职业">
					<Cascader :data="occupationdata" v-model="voccupation" filterable @on-change="onOccupation"></Cascader>
				</FormItem>
				<FormItem label="备注">
					<Input v-model="vform.memo" placeholder="请填写"></Input>
				</FormItem>
				<FormItem label="专业资质" style="width:100%">
					<Input v-model="vform.qualification" placeholder="请填写"></Input>
				</FormItem>
				<FormItem label="擅长话题" style="width:100%">
					<Button class="btn-add" type="text" @click="showTagBox=!showTagBox" v-if="vform.tag12.length<10">
							<Icon type="md-add" size="16"></Icon>
					</Button>
					<Tag v-for="(item,index) in vform.tag12" :key="index" type="border" closable @on-close="OnTagClose(index)" color="success">{{item}}</Tag>
	
				</FormItem>
				<FormItem label="擅长话诉求" style="width:100%">
					<Tag v-for="(item,index) in vform.tag22" :key="index" type="border" color="success">{{item}}</Tag>
	
				</FormItem>
				<FormItem label="个性化标签" style="width:100%">
					<Tag v-for="(item,index) in vform.tag32" :key="index" type="border" color="success">{{item}}</Tag>
	
				</FormItem>
				
				<FormItem label="个人经历">
					<quill-editor ref="quill1" v-model="vform.experience" :options="editorOption"></quill-editor>
				</FormItem>
			</Col>
			<Col :span=8>
				<Card >
					<p slot="title">
						<Icon type="ios-film-outline"></Icon>
						控制菜单
					</p>
					<div>

					<FormItem label="头像">
						<div class="camera-wrapper" v-if="vform.avatar!=''">
							<img :src="vform.avatar" />
							<div class="list-cover">
								<Icon type="ios-eye-outline" @click.native="onView(vform.avatar)"></Icon>
								<Icon type="ios-trash-outline" @click.native="onRemove(vform.avatar)"></Icon>
							</div>
						</div>
						<Button v-if="vform.avatar==''" class="btn-camera" type="text" @click="showPictureBox=!showPictureBox">
							<Icon type="ios-camera" size="20"></Icon>
						</Button>
					</FormItem>
					<FormItem label="状态">
						<Tag :color="getStatusColor(vform.status)">{{statusList[vform.status]}}</Tag>
					</FormItem>

					<FormItem label="服务状态">
						<Tag :color="getStatusColor(vform.service_status)">{{serviceStatusList[vform.service_status]}}</Tag>
					</FormItem>
					<FormItem label="已售时长(H)">
						<Tag color="primary">{{(vform.sale_time/60).toFixed(2)}}</Tag>
					</FormItem>
					
					<FormItem label="预约状态">
						<Tag :color="1==vform.appointment_status?'primary':'default'">{{1==vform.appointment_status?'开启':'关闭'}}</Tag>&nbsp;&nbsp;
					</FormItem>
					<Br/>
					<FormItem label="开始时间">
						<Tag color="blue">{{vform.appointment_start}}</Tag>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="结束时间">
						<Tag color="blue">{{vform.appointment_end}}</Tag>&nbsp;&nbsp;
					</FormItem>
					
					<FormItem label="通话单价(每步长)">
						<InputNumber :max="500" :min="0.01" :step="0.01" v-model="vform.percallprice"></InputNumber>
					</FormItem>
					<FormItem label="通话步长(min)">
						<InputNumber :max="500" :min="0.01" :step="0.01" v-model="vform.percallstep"></InputNumber>
					</FormItem>
					<FormItem label="文字单价(每步长)">
						<InputNumber :max="500" :min="0.01" :step="0.01" v-model="vform.pertextprice"></InputNumber>
					</FormItem>
					<FormItem label="文字步长(min)">
						<InputNumber :max="500" :min="0.01" :step="0.01" v-model="vform.pertextstep"></InputNumber>
					</FormItem>

					<FormItem label="等级">
						<InputNumber :max="9999" :min="0" :step="1" v-model="vform.level"></InputNumber>
					</FormItem>
					<FormItem label="权重">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.sequence"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="帮助数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.help_qty"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="礼物数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.gift_qty"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="粉丝数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.fans_qty"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="关注数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.follow"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="评论数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.comment_qty"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="好评数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.comment_like_qty"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<br/>
						<Button type="success" @click="save">保存</Button>
						<Button type="primary" @click="changeStatus($route.params.id,1)" v-if="0==vform.status || 2==vform.status">激活</Button>
						<Button type="error" @click="changeStatus($route.params.id,2)" v-if="1==vform.status">禁用</Button>
						<Button type="primary" @click="changeServiceStatus($route.params.id,1)" v-if="0==vform.service_status">接单</Button>
						<Button type="info" @click="changeServiceStatus($route.params.id,0)" v-if="1==vform.service_status">休息</Button>
						<Button type="error" ghost @click="deleteComment($route.params.id,3)" >删除</Button>
			


					</div>
				</Card>
			</Col>
		</Row>
	</Form>

	<Tag-Selector :show.sync="showTagBox" @on-hide="showTagBox=false" @on-change="insertTag"></Tag-Selector>
	
	<Picture-Selector :show.sync="showPictureBox" @on-hide="showPictureBox=false" @on-change="insertImage"></Picture-Selector>
	
    <Modal title="查看图片" v-model="currentImagvisible">
        <img :src="currentImag" v-if="currentImagvisible" style="width: 100%">
    </Modal>
</div>
</template>
<script>

// 引入子组件
import PictureSelector from '@/components/PictureSelector/PictureSelector.vue'
import TagSelector from '@/components/TagSelector/TagSelector.vue'
import ChinaAddressV4Data from '@/../static/js/china_address_v4.json'
import OccupationV1Data from '@/../static/js/occupation.json'

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

// quill编辑器的字体
var fonts = ['SimSun', 'Microsoft-YaHei','Arial','Times-New-Roman','sans-serif'];  
var Font = Quill.import('formats/font'); 
Font.whitelist = fonts; //将字体加入到白名单 
Quill.register(Font, true);


import {mapState,mapGetters} from 'vuex'
import {Cascader, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'welisten-listener-edit',
	components: {TagSelector, PictureSelector, Cascader, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'编辑',
			showTagBox:false,
			showPictureBox:false,
			currentImag:'',
			currentImagvisible:false,
			vcity:[],
			voccupation:[],
			chinadata: ChinaAddressV4Data,
			occupationdata: OccupationV1Data,
			editorIndex:0,
			editorOption:{
				placeholder:'请输入内容',
				modules:{
					imageResize: {},
					toolbar:{
                        container: [
							['bold', 'italic', 'underline', 'strike'],        // toggled buttons
							['blockquote', 'code-block'],           // custom button values
							[{ 'list': 'ordered'}, { 'list': 'bullet' }],
							[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
							[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
							['link'],
							[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
							[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

							[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
							[{ 'font': fonts }],
							[{ 'align': [] }],
							['clean'], 
                        ],
                    },
					syntax: {highlight:text => hljs.highlightAuto(text).value},


				}
			},
			vform:{tag12:[]},
			statusList: ['暂存','激活','禁用','删除'],
			serviceStatusList:['休息中','可接单'],
			typeList:[
				{value: "0",label: '普通会员'},
				{value: "1",label: '实习倾听者'},
				{value: "2",label: '倾听者'},
				{value: "3",label: '咨询师'}
			],
			titleList:[
				{value: "0",label: '无'},
				{value: "1",label: '活跃'},
				{value: "2",label: '新锐'},
				{value: "3",label: '大师'},
				{value: "4",label: '心理'}
			],
			marriedList:[
				{value: "0",label: '单身'},
				{value: "1",label: '有对象'},
				{value: "2",label: '已婚'},
				{value: "3",label: '已婚有孩子'},
				{value: "4",label: '离异'},
				{value: "5",label: '离异有孩子'},
			],
			constellationList:[
				{value: '水瓶座',label: '水瓶座'},
				{value: '双鱼座',label: '双鱼座'},
				{value: '白羊座',label: '白羊座'},
				{value: '金牛座',label: '金牛座'},
				{value: '双子座',label: '双子座'},
				{value: '巨蟹座',label: '巨蟹座'},
				{value: '狮子座',label: '狮子座'},
				{value: '处女座',label: '处女座'},
				{value: '天秤座',label: '天秤座'},
				{value: '天蝎座',label: '天蝎座'},
				{value: '射手座',label: '射手座'},
				{value: '摩羯座',label: '摩羯座'},
			],
			educationList:[
				{value: '大专',label: '大专'},
				{value: '本科',label: '本科'},
				{value: '硕士',label: '硕士'},
				{value: '博士',label: '博士'},
			],
			
		}
	},
	methods:{
		init:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/welisten/listeners/"+self.$route.params.id,{params: { 'token': self.token }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){
				if(200==response1.data.status && 0==response1.data.code)
				{
					response1.data.data.help_qty=parseInt(response1.data.data.help_qty)
					response1.data.data.gift_qty=parseInt(response1.data.data.gift_qty)
					response1.data.data.fans_qty=parseInt(response1.data.data.fans_qty)
					response1.data.data.follow_qty=parseInt(response1.data.data.follow_qty)
					response1.data.data.comment_qty=parseInt(response1.data.data.comment_qty)
					response1.data.data.comment_like_qty=parseInt(response1.data.data.comment_like_qty)
					response1.data.data.sequence=parseInt(response1.data.data.sequence)
					response1.data.data.percallprice=parseInt(response1.data.data.percallprice)
					response1.data.data.level=parseInt(response1.data.data.level)
					response1.data.data.percallstep=parseInt(response1.data.data.percallstep)
					response1.data.data.pertextprice=parseInt(response1.data.data.pertextprice)
					response1.data.data.pertextstep=parseInt(response1.data.data.pertextstep)
					response1.data.data.age=parseInt(response1.data.data.age)
					response1.data.data.sale_time=parseInt(response1.data.data.sale_time)
					if(null==response1.data.data.tag || ''==response1.data.data.tag){
						response1.data.data.tag=[]
						response1.data.data.tag12=[]
					}
					else{response1.data.data.tag12=response1.data.data.tag.split(",")}

					if(null==response1.data.data.tag2 || ''==response1.data.data.tag2){
						response1.data.data.tag2=[]
						response1.data.data.tag22=[]
					}
					else{response1.data.data.tag22=response1.data.data.tag2.split(",")}

					if(null==response1.data.data.tag3 || ''==response1.data.data.tag3){
						response1.data.data.tag3=[]
						response1.data.data.tag32=[]
					}
					else{response1.data.data.tag32=response1.data.data.tag3.split(",")}

					self.vform=response1.data.data
					self.vcity=[self.vform.city]
					self.voccupation=[self.vform.occupation]
				}else{self.$Message.error(response1.data.message)}
				
				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},
		
		changeStatus:function(uid,statusId){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/listeners?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.$router.push('/welisten/listen/index')}
					else{self.vform.status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error( error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		},
		changeServiceStatus:function(uid,statusId){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/listeners?_method=put&token="+self.token,{'id':uid,'data':'{"service_status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.$router.push('/welisten/listener/index')}
					else{self.vform.service_status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error( error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		},
		deleteComment:function(uid,statusId){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					this.changeStatus(uid,statusId)
				},
			})
		},
		save:function(){
			let self=this
			
			self.vform.tag=self.vform.tag12.toString()
			self.vform.tag2=self.vform.tag22.toString()
			self.vform.tag3=self.vform.tag32.toString()
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/listeners?_method=put&token="+self.token,{'id':self.$route.params.id,'data':JSON.stringify(self.vform)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功');
				}else{
					
					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		},
		getStatusColor(status){
			if(2==status){return 'error'}
			else if(1==status){return 'success'}
			return 'default'
		},
		onCity:function(value, selectedData){
			this.vform.city=selectedData[0].label
		},
		onOccupation:function(value, selectedData){
			this.vform.occupation=selectedData[0].label
		},
		insertTag:function(val){
			if(this.vform.tag99.indexOf(val)<0){this.vform.tag99.push(val)}
			this.showTagBox=false
		},
		OnTagClose:function(index){
			this.vform.tag99.splice(index,1)
		},
		insertImage:function(url){
			this.vform.avatar=url
			this.showPictureBox=false

		},
		onRemove:function(index){this.vform.avatar=''},
		onView:function(url){
			this.currentImag=url
			this.currentImagvisible=true
		}
	},
	created:function(){
	},
	mounted () {
    	this.setTitle(this.title)
	},
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuData'])
		
	},
}



</script>
<style lang="less" scoped>

.camera-wrapper{
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border: 1px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	position: relative;
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	margin-right: 4px;
    
	img{width: 100%;height: 100%;}
	.list-cover{
		display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
		background: rgba(0,0,0,.6);
		i{
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
		}
	}
}
.camera-wrapper:hover .list-cover{display: block;}

.btn-camera,.btn-add{border:1px dashed #dcdee2;width:58px;height:58px;vertical-align: text-bottom;}
.btn-camera:hover,.btn-add:hover{border:1px dashed #5cadff;}
.btn-add{width:24px;height:24px;vertical-align:middle;
	i{position: relative;
    font-size: 16px;
    left: -7px;
    top: -3px;}
}
</style>